<template>
  <el-config-provider :locale="zhCn">
    <div>
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
              <el-form-item label="转正申请" label-position="top"
                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                <div class="progress-bar">
                  <div class="progress"></div>
                </div>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="工号" prop="workNumber" label-position="top" required>
                <el-input 
                  v-model="formData.workNumber" 
                  placeholder="请输入工号" 
                  style="width: 260px"
                  clearable />
                <el-button @click="getEmployeeInfo" style="margin-left: 10px;">获取信息</el-button>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="姓名" prop="regularizationName" label-position="top" required>
                <el-input 
                  v-model="formData.regularizationName" 
                  placeholder="请输入姓名" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="部门" prop="department" label-position="top" required>
                <el-input 
                  v-model="formData.department" 
                  placeholder="请输入部门" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="职位" prop="posts" label-position="top" required>
                <el-input 
                  v-model="formData.posts" 
                  placeholder="请输入职位" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="聘用形式" prop="employmentForm" label-position="top" required>
                <el-select 
                  v-model="formData.employmentForm" 
                  placeholder="请选择聘用形式" 
                  style="width: 260px"
                  placement="bottom">
                  <el-option label="正式" value="正式" />
                  <el-option label="实习" value="实习" />
                  <el-option label="兼职" value="兼职" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="身份证号" prop="identityCard" label-position="top" required>
                <el-input 
                  v-model="formData.identityCard" 
                  placeholder="请输入身份证号" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="入职日期" prop="onboarding" label-position="top" required>
                <el-date-picker 
                  v-model="formData.onboarding" 
                  type="date" 
                  placeholder="选择入职日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
         
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="拟转正日期" prop="turnPositive" label-position="top" required>
                <el-date-picker 
                  v-model="formData.turnPositive" 
                  type="date" 
                  placeholder="选择拟转正日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="正式薪资" prop="salary" label-position="top" required>
                <el-input 
                  v-model="formData.salary" 
                  placeholder="请输入正式薪资" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="试用期薪资" prop="probationarySalary" label-position="top" required>
                <el-input 
                  v-model="formData.probationarySalary" 
                  placeholder="请输入试用期薪资" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="部门主管" prop="departmentHead" label-position="top" required>
                <el-input 
                  v-model="formData.departmentHead" 
                  placeholder="请输入部门主管" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="申请日期" prop="applicationTime" label-position="top" required>
                <el-date-picker 
                  v-model="formData.applicationTime" 
                  type="date" 
                  placeholder="选择申请日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="试用期工作成果描述" prop="description" label-position="top">
                <el-input 
                  v-model="formData.description" 
                  type="textarea"
                  :rows="4"
                  placeholder="请输入试用期工作成果描述" 
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="试用期综合自我评价" prop="selfEvaluation" label-position="top">
                <el-input 
                  v-model="formData.selfEvaluation" 
                  type="textarea"
                  :rows="4"
                  placeholder="请输入试用期综合自我评价" 
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="部门主管评价" prop="supervisorEvaluation" label-position="top">
                <el-input 
                  v-model="formData.supervisorEvaluation" 
                  type="textarea"
                  :rows="4"
                  placeholder="请输入部门主管评价" 
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="平均得分" prop="averageScore" label-position="top">
                <el-input 
                  v-model="formData.averageScore" 
                  placeholder="请输入平均得分" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="评价等级" prop="evaluationLevel" label-position="top">
                <el-select 
                  v-model="formData.evaluationLevel" 
                  placeholder="请选择评价等级" 
                  style="width: 260px">
                  <el-option label="优秀" value="优秀" />
                  <el-option label="良好" value="良好" />
                  <el-option label="合格" value="合格" />
                  <el-option label="不合格" value="不合格" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="主管评价描述" prop="probationPeriod" label-position="top">
                <el-input 
                  v-model="formData.probationPeriod" 
                  placeholder="请输入主管评价描述" 
                  style="width: 260px" 
                  clearable />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="主管是否通过" prop="supervisor" label-position="top">
                <el-select 
                  v-model="formData.supervisor" 
                  placeholder="请选择是否通过" 
                  style="width: 260px">
                  <el-option label="通过" value="通过" />
                  <el-option label="不通过" value="不通过" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="正式转正日期" prop="officialDate" label-position="top">
                <el-date-picker 
                  v-model="formData.officialDate" 
                  type="date" 
                  placeholder="选择正式转正日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 260px" />
              </el-form-item>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item label="HR确认" prop="hrConfirm" label-position="top">
                <el-select 
                  v-model="formData.hrConfirm" 
                  placeholder="请选择HR确认状态" 
                  style="width: 260px">
                  <el-option label="已确认" value="已确认" />
                  <el-option label="未确认" value="未确认" />
                  <el-option label="已拒绝" value="已拒绝" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        
        <hr>
        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 表单引用
const formRef = ref(null)

const emits = defineEmits(['refresh'])

const formData = ref({
  workNumber: '',
  regularizationName: '',
  department: '',
  posts: '',
  employmentForm: '',
  identityCard: '',
  onboarding: '',
  turnPositive: '',
  salary: '',
  probationarySalary: '',
  departmentHead: '',
  applicationTime: '',
  description: '',           
  selfEvaluation: '',        
  supervisorEvaluation: '',   
  averageScore: '',          
  evaluationLevel: '',       
  probationPeriod: '',       
  supervisor: '',            
  officialDate: '',          
  hrConfirm: ''              
})

const rules = ref({
  workNumber: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  regularizationName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
  posts: [{ required: true, message: '请输入职位', trigger: 'blur' }],
  employmentForm: [{ required: true, message: '请选择聘用形式', trigger: 'change' }],
  identityCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
  onboarding: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
  turnPositive: [{ required: true, message: '请选择拟转正日期', trigger: 'change' }],
  salary: [{ required: true, message: '请输入正式薪资', trigger: 'blur' }],
  probationarySalary: [{ required: true, message: '请输入试用期薪资', trigger: 'blur' }],
  departmentHead: [{ required: true, message: '请输入部门主管', trigger: 'blur' }],
  applicationTime: [{ required: true, message: '请选择申请日期', trigger: 'change' }]
})

// 根据工号获取员工信息
const getEmployeeInfo = async () => {
  if (!formData.value.workNumber) {
    ElMessage.warning('请输入工号');
    return;
  }
  
  try {
    const response = await axios.get(`/api/regularization/employee/${formData.value.workNumber}`);
    
    if (response.data.code === 200) {
      const employee = response.data.data;
      
      // 自动填充表单数据
      formData.value.regularizationName = employee.employeeName;
      formData.value.department = employee.onboardingDepartment;
      formData.value.posts = employee.entryPosition;
      formData.value.employmentForm = employee.employmentForm;
      formData.value.identityCard = employee.employeeNumber;
      formData.value.onboarding = employee.dateOfInduction;
      formData.value.salary = employee.officialSalary;
      formData.value.probationarySalary = employee.probationarySalary;
      formData.value.departmentHead = employee.departmentHead;
      
      ElMessage.success('员工信息获取成功');
    } else {
      ElMessage.error(response.data.message || '员工已转正');
      formData.value.regularizationName = '';
      formData.value.department = '';
      formData.value.posts = '';
      formData.value.employmentForm = '';
      formData.value.identityCard = '';
      formData.value.onboarding = '';
      formData.value.salary = '';
      formData.value.probationarySalary = '';
      formData.value.departmentHead = '';
    }
  } catch (error) {
    console.error('获取员工信息失败:', error);
    ElMessage.error('获取员工信息失败: ' + (error.response?.data?.message || error.message));
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const submitData = {
          employeeIdNumber: formData.value.workNumber, 
          regularizationName: formData.value.regularizationName,
          department: formData.value.department,
          posts: formData.value.posts,
          employmentForm: formData.value.employmentForm,
          identityCard: formData.value.identityCard,
          onboarding: formData.value.onboarding,
          turnPositive: formData.value.turnPositive,
          salary: formData.value.salary,
          probationarySalary: formData.value.probationarySalary,
          departmentHead: formData.value.departmentHead,
          applicationTime: formData.value.applicationTime,
          description: formData.value.description,
          selfEvaluation: formData.value.selfEvaluation,
          supervisorEvaluation: formData.value.supervisorEvaluation,
          averageScore: formData.value.averageScore,
          evaluationLevel: formData.value.evaluationLevel,
          probationPeriod: formData.value.probationPeriod,
          supervisor: formData.value.supervisor,
          officialDate: formData.value.officialDate,
          hrConfirm: formData.value.hrConfirm || '待确认'
        }
        
        const response = await axios.post('/api/regularization', submitData)
        
        if (response.data.code === 200) {
          ElMessage.success('新增成功')
          closeDialog()
          emits('refresh') 
        } else {
          ElMessage.error(response.data.message || '新增失败')
        }
      } catch (error) {
        console.error('新增失败:', error)
        ElMessage.error('新增失败: ' + (error.response?.data?.message || error.message))
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  formData.value = {
    workNumber: '',
    regularizationName: '',
    department: '',
    posts: '',
    employmentForm: '',
    identityCard: '',
    onboarding: '',
    turnPositive: '',
    salary: '',
    probationarySalary: '',
    departmentHead: '',
    applicationTime: '',
    description: '',
    selfEvaluation: '',
    supervisorEvaluation: '',
    averageScore: '',
    evaluationLevel: '',
    probationPeriod: '',
    supervisor: '',
    officialDate: '',
    hrConfirm: ''
  }
}

// 关闭对话框
const closeDialog = () => {
  resetForm()
}
</script>

<style scoped>
.progress-bar {
  height: 6px;
  background-color: #ccebf7;
  border-radius: 3px;
  display: flex;
  width: 100%;
  overflow: hidden;
}

.progress {
  width: 8%;
  height: 10;
  background-color: #61c3ea;
  border-radius: 3px 0 0 3px;
  transition: width 0.3s ease;
}
</style>